import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { regAreaName, initFormat, getMapLegend } from '@/utils/base/utils';
import { china } from '@/utils/base/mock';
import { useEffect, useState } from 'react';
import './index.less';

function getAreaCodeColor(value, colorItem) {
  if (colorItem.length > 4) {
    if (parseFloat(value) > 0 && parseFloat(value) <= colorItem[0]) {
      return 'rgba(249,217,194)';
    }
    if (parseFloat(value) > colorItem[0] && parseFloat(value) <= colorItem[1]) {
      return 'rgba(241,161,119)';
    }
    if (parseFloat(value) > colorItem[1] && parseFloat(value) <= colorItem[2]) {
      return 'rgba(238,129,82)';
    }
    if (parseFloat(value) > colorItem[2] && parseFloat(value) <= colorItem[3]) {
      return 'rgba(231,96,51)';
    }
    if (parseFloat(value) > colorItem[3] && parseFloat(value) <= colorItem[4]) {
      return 'rgba(195,69,36,1)';
    }
    if (parseFloat(value) > colorItem[4]) {
      return 'rgba(159,47,23,1)';
    }
  }
}
function getAreaCodeColor2(value, colorItem) {
  if (colorItem.length > 4) {
    if (parseFloat(value) > 0 && parseFloat(value) <= colorItem[0]) {
      return 'rgba(234,125,88)';
    }
    if (parseFloat(value) > colorItem[0] && parseFloat(value) <= colorItem[1]) {
      return 'rgba(233,144,144)';
    }
    if (parseFloat(value) > colorItem[1] && parseFloat(value) <= colorItem[2]) {
      return 'rgba(237,166,142)';
    }
    if (parseFloat(value) > colorItem[2] && parseFloat(value) <= colorItem[3]) {
      return 'rgba(242,188,51)';
    }
    if (parseFloat(value) > colorItem[3] && parseFloat(value) <= colorItem[4]) {
      return 'rgba(246,211,199,1)';
    }
    if (parseFloat(value) > colorItem[4]) {
      return 'rgba(159,47,23,1)';
    }
  }
}

function getAreaCodeColor_Green(value, colorItem) {
  if (colorItem.length > 4) {
    if (parseFloat(value) > 0 && parseFloat(value) <= colorItem[0]) {
      return 'rgba(80, 174, 172, 0.1)';
    }
    if (parseFloat(value) > colorItem[0] && parseFloat(value) <= colorItem[1]) {
      return 'rgba(80, 174, 172, 0.3)';
    }
    if (parseFloat(value) > colorItem[1] && parseFloat(value) <= colorItem[2]) {
      return 'rgba(80, 174, 172, 0.5)';
    }
    if (parseFloat(value) > colorItem[2] && parseFloat(value) <= colorItem[3]) {
      return 'rgba(80, 174, 172, 0.6)';
    }
    if (parseFloat(value) > colorItem[3] && parseFloat(value) <= colorItem[4]) {
      return 'rgba(80, 174, 172, 1)';
    }
    if (parseFloat(value) > colorItem[4]) {
      return 'rgba(34, 131, 128, 1)';
    }
  }
}

const ChinaMap = () => {
  const [mapOption, setMapOption] = useState({});
  const [code, setCode] = useState(100000);
  const [mapPanel, setMapPanel] = useState([]);
  useEffect(() => {
    if (china) {
      let { arrList, colorSection } = getMapLegend(china.head.maximum, 1);
      let type = parseInt(code) > 100000 ? 2 : 1;
      setMapOption(
        chinaMapOption(
          china.data,
          type,
          code,
          colorSection,
          1,
          china.head.tooltip,
        ),
      );
      setMapPanel(arrList);
    }
  }, [code]);
  const handleMapClick = (e) => {
    if (!e.data) {
      return;
    }
    setCode(e.data.code);
  };
  return (
    <>
      <ReactEcharts
        option={mapOption}
        style={{ width: '100%', height: '100%' }}
        onEvents={{
          click: handleMapClick,
        }}
      ></ReactEcharts>
      <div className="map-panel">
        <p>单位：{china.data[0].unit}</p>
        <ul>
          {mapPanel.map((item, index) => {
            return (
              <li key={index}>
                <span
                  style={{ background: `rgba(${item.color})` }}
                  className="colorBlock"
                ></span>
                <span style={{ background: `rgba(${item.color})` }}>
                  {item.name}
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

function chinaMapOption(
  data,
  type = 1,
  code = 100000,
  colorItem,
  ColorType = 1,
  tootipParam = {},
  cityInfo = {},
) {
  const cityValue = cityInfo?.value || '';
  const cityLev = cityInfo?.level || 0;
  const geoJson = require(`../../../../public/js/mapJson/${code}.json`);
  echarts.registerMap(type == 1 ? 'china' : 'china1', geoJson);
  let option = {
    tooltip: {
      trigger: 'axis',
      padding: 0,
      backgroundColor: 'none',
      borderColor: 'none',
    },
    animation: true,
    visualMap: [
      {
        show: false,
        seriesIndex: 0,
        dimension: 0, //取第一维度,批次
        right: 10,
        bottom: 10,
        zlevel: 10,
        calculable: true,
        min: 0,
        max: 10,
        inRange: {
          //由低到高
          color: ['#11eb11', '#006edd'],
        },
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
    ],
    geo: [
      {
        map: type == 1 ? 'china' : 'china1',
        zlevel: -1,
        show: false,
        silent: true,
        roam: false,
        // zoom: type == 1 ? 1.5 : 1,
        layoutCenter: type == 1 ? ['50%', '50%'] : ['50%', '50%'],
        layoutSize: type == 1 ? '65%' : '90%',
        itemStyle: {
          emphasis: {
            areaColor: '#389BB7',
          },
        },
      },
    ],
    series: [
      {
        type: 'map',
        map: type == 1 ? 'china' : 'china1',
        // nameMap: cityMap,
        silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
        regionHeight: 5,
        zoom: type == 1 ? 1.5 : 1,
        layoutCenter: type == 1 ? ['50%', '50%'] : ['50%', '50%'],
        layoutSize: type == 1 ? '65%' : '90%',
        label: {
          show: true,
          formatter: function (params) {
            const { name, value } = params;
            if (name) {
              return name.replace(regAreaName, '');
            }
          },
          fontSize: 12,
          color: '#000',
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: '#FFF',
          borderColor: '#FFF',
          padding: [23, 24],
          formatter: function (params) {
            const { data, marker } = params;
            if (params.name !== '南海诸岛' && data) {
              const { name, value, unit, level } = data;
              const vl = cityLev < 3 ? value : cityValue;
              var html =
                '<div class="tooltip-name" style="margin-bottom: 5px">' +
                marker +
                '<span>' +
                params.name +
                '</span></div>';
              html +=
                '<div class="tooltip-name" style="margin-bottom: 5px">' +
                (tootipParam.name || '') +
                '：<span>' +
                initFormat(vl) +
                '</span>&nbsp;' +
                unit +
                '</span></div>';
              return html;
            }
          },
        },
        roam: true,
        itemStyle: {
          areaColor: 'rgb(235, 230, 228)', //'#031525',
          borderColor: '#000',
          emphasis: {
            borderWidth: 1,
            borderColor: '#000',
            areaColor: 'rgb(235, 230, 228)',
          },
        },
        emphasis: {
          disabled: false,
        },
        select: {
          disabled: true,
        },
        data: data.map((item) => {
          let color = 'rgba(235,230,228,1)';
          let name = '';
          if (item.value) {
            color =
              ColorType == 1
                ? getAreaCodeColor(item.value, colorItem) ||
                  'rgba(235,230,228,1)'
                : getAreaCodeColor_Green(item.value, colorItem) ||
                  'rgba(235,230,228,1)';
          }
          return {
            ...item,
            itemStyle: {
              color,
              emphasis: {
                areaColor: '#00FFFF',
                // ColorType == 1
                //   ? getAreaCodeColor(item.value, colorItem) ||
                //   'rgba(235,230,228,1)'
                //   : getAreaCodeColor_Green(item.value, colorItem) ||
                //   'rgba(235,230,228,1)',
              },
            },
          };
        }),
      },
    ],
  };
  return option;
}

export default ChinaMap;
